<template>
	<view class="Column transport " style="width: 100%;">
		<view class="Row transport width100  couponitem">
			<!-- 左边 -->
			<view class="Column couponleft " :style="item.left">
				<image :src="leftico" style="width: 60upx;height: 60upx;"></image>
				<view class="Column width100 transport" style="align-items: center;">
					<view class="transport width100 Row Center">
						<text style="font-size: 40upx;" >￥</text>
						<text style="font-size: 50upx;" >{{value.discountsmoney}}</text>
					</view>
					<text style="font-size: 20upx;">满{{value.astrictmoney}}元可用</text>
				</view>
			</view>
			<!-- 右边 -->
			<view class="couponright Flex1 Column " :style="item.right">
				<view class="transport " style="margin-top: 30upx;" v-if="value.state ==2"></view>
				<view class="Row transport width100" style="align-items:flex-end;">
					<view class="transport Row " style="margin-left: 20upx;align-items: center;font-size: 20upx;">
						<view class="coupontype Center transport" :style="item.coupontype" style="width: 100upx;">
							<text style="">{{typeList[value.type]}}</text>
						</view>
						<text style="font-weight: 400;margin-left: 10upx;">{{value.name}}</text>
					</view>
					<view class="transport Flex1"></view>
					<image :src="rightico" style="width: 70upx;height: 70upx;" v-if="value.state != 2"></image>
					<view v-else style="margin-top: 10upx;font-size: 25upx;margin-right: 30upx;">限量{{value.totalnum}}张</view>
				</view>
				
				<view class="Row transport width100" style="margin-top: 20upx;color:#333333;font-size: 22upx;margin-left: 20upx;">
					<text style="">{{value.getbegintime}}至{{value.getendtime}}</text>
					<view class="Flex1 transport Center lingqubtn" :style="item.lingqubtn" @click="ImOperation()" v-if="value.state != 3 && showlingqubtn && item.lingqubtn != ''">
						<text style="font-size: 20upx;" v-if="value.state == 2">立即领取</text>
						<text style="font-size: 20upx;" v-if="value.state == 1">立即使用</text>
					</view>
				</view>
				
				<view class="dashed2" />
				<view class="Row Flex1 rulebtn transport width100" @click="OpenRule()">
					<text style="margin-left: 20upx;">使用规则</text>
					<view class="Flex1"></view>
					<text class="cuIcon-unfold" style="font-size: 40upx;"></text>
					<!-- <image src="../../static/maintain/gengduotaocan@2x.png" class="gengduotaocan"></image> -->
				</view>
			</view>
			<!-- 最右边插槽 -->
			<slot></slot>

		</view>
		<view class="Row rule width100" v-if="showrule == true">
			<text style="margin-left: 10upx;">
				<!-- 保养频平类可用，订单满800元，减免50优惠券 -->
				{{value.description}}
			</text>
		</view>
	</view>

</template>

<script>
	export default {
		name: "v-couponitme",
		props: {
			//1 红包 2 满减券 3 随机立减
			coupontype: {
				type: Number,
				default: 1
			},
			used: {
				type: Boolean,
				default: false
			},
			timeout: {
				type: Boolean,
				default: false
			},
			value: {
				type: Object,
				default: () => {
					return {
						state:2
					}
				}
			},
			showlingqubtn: {
				type: Boolean,
				default: true
			},
			pages: {
				type: String,
				default: "common"
			}
		},
		data() {
			return {
				showrule: false,
				item: {
					left: "bgcolor:#f0f4ff;color:#267ce7;border:#dee6fb 2upx solid",
					right: "bgcolor:#fbfcff;;border:#dee6fb 2upx solid",
					coupontype: "color:#FFFFFF;background-color: #287cdf;",
					lingqubtn: "border-color: #277ee8;color: #277ee8;"
				},
				leftico: "../../static/reddenvelope/nouser3.png",
				rightico: "../../static/reddenvelope/yilingqu@3x.png",
				typeList: ["", "券品类咖券", "限套餐咖券", "限品类咖券"],
				isover: false
			}
		},
		computed: {
			//监听数值的变化
		},
		//跟 onready函数一样  渲染完成后的函数
		async mounted() {
			// console.log(this.value)
			if (this.value.useendtime != null) {
				let endtime = new Date(this.value.useendtime);
				let timenow = new Date();
				let ms = endtime.getTime() - timenow.getTime()
				if (ms <= 0) {
					//已经过期
					this.isover = true
				}
			}
			//根据后台数据state来判断是否为灰色样式 1已领取 2可领取 3已领完
			//根据discountstype 判断具体为那种优惠券 1满减卷2红包
			//根据外面传进来的use是否使用

			//改变样式 是否为灰色
			//已使用，已过期 为灰色
			if (this.used || this.isover || this.value.state == 3) {
				//修改样式
				this.setstyle_gray()
				//改变left icon
				this.setlefticon_gray()
			} else {
				this.setstyle_normal()
				this.setlefticon_normal()
			}
			//改变right icon
			this.setrighticon()
		},
		methods: {
			setstyle_normal() {
				// 1满减卷 2红包 
				switch (this.value.discountstype) {
					case 1:
						this.item = {
							left: "bgcolor:#f0f4ff;color:#267ce7;border:#dee6fb 2upx solid",
							right: "bgcolor:#fbfcff;;border:#dee6fb 2upx solid",
							coupontype: "color:#FFFFFF;background-color: #287cdf;",
							lingqubtn: "border-color: #277ee8;color: #277ee8;"
						}
						break;
					case 2:
						this.item = {
							left: "background-color:#ffefef;color:#fd4948;border:#f6dde0 2upx solid",
							right: "background-color:#fffafa;border:#f6dde0 2upx solid",
							coupontype: "color:#FFFFFF;background-color: #fd4948;",
							lingqubtn: "border-color: #fd4948;color: #fd4948;"
						}
						break;
					case 3:

						break;
					default:
						break;
				}
			},
			setstyle_gray() {
				this.item = {
					left: "background-color:#fcfcfc;color:#a2a4a5;border:#f0f4ff 2upx solid",
					right: "background-color:#fcfcfc;border:#f0f4ff 2upx solid",
					coupontype: "color:#FFFFFF;background-color: #a2a4a5;",
					lingqubtn: ""
				}
			},
			setlefticon_normal() {
				switch (this.value.discountstype) {
					case 1:
						this.leftico = "../../static/reddenvelope/nouser3.png"
						break;
					case 2:
						this.leftico = "../../static/reddenvelope/nouser1.png"
						break;
					case 3:
						this.leftico = "../../static/reddenvelope/nouser2.png"
						break;
					default:
						break;
				}
			},


			setlefticon_gray() {
				switch (this.value.discountstype) {
					case 1:
						this.leftico = "../../static/reddenvelope/used3.png"
						break;
					case 2:
						this.leftico = "../../static/reddenvelope/used1.png"
						break;
					case 3:
						this.leftico = "../../static/reddenvelope/used2.png"
						break;
					default:
						break;
				}
			},
			setrighticon() {
				// 1满减卷 2红包 
				switch (this.value.discountstype) {
					case 1:
						this.rightico = "../../static/reddenvelope/yilingqu@3x.png"
						break;
					case 2:
						this.rightico = "../../static/reddenvelope/yilingqu.png"
						break;
					default:
						break;
				}
				//如果已经领取完 则修改为领取完状态
				if (this.value.state == 3) {
					this.rightico = "../../static/reddenvelope/yilingwan.png"
				}
				//如果已经使用 则进行修改为已经使用的icon
				if (this.used == true) {
					this.rightico = "../../static/reddenvelope/yishiyong.png"
				}
				//如果过期了 则进行修改righticon
				if (this.isover == true) {
					let endtime = new Date(this.value.useendtime);
					let timenow = new Date();
					let ms = endtime.getTime() - timenow.getTime()
					if (ms <= 0) {
						//已经过期
						this.rightico = "../../static/reddenvelope/yihuoqi.png"
					}
				}
			},

			OpenRule() {
				this.showrule = !this.showrule
			},
			requestdata() {
				let base =this.$store.user.getbase(this.$store.user.userdata)
				let data = {
					base: base,
					data: {
						ticketid: this.value.id
					}
				}
				return data
			},
			ImOperation() {
				if (this.value.state == 2) {
					this.ImReceive()
				} else {
					this.ImUse()
				}
			},
			async ImUse() {
				// console.log(this.value)
				uni.navigateTo({
					url: "../../pages/near/near3?id=" + this.value.id
				})
			},
			async ImReceive() {
				if (this.value.state != 2) {
					return
				}
				let data = this.requestdata()
				this.$message.showLoading('领取优惠券中...')
				let res = await this.$request.post(this.$api.receivecouponapi, data)
				this.$message.hideLoading()
				// console.log(res)
				if (res.code != 200) {
					if (res.code == 201) {
						this.notice(res.msg)
					} else if (res.code == 202) {
						// 您领取的优惠卷还未使用  使用完后才可以继续领取哦
						this.$message.showToast(res.msg)
						this.value.state = 1
					} else {
						// 不好意思,您来晚了哦！已被抢完啦
						this.value.state = 3
						this.item = {
							left: "background-color:#fcfcfc;color:#a2a4a5;border:#f0f4ff 2upx solid",
							right: "background-color:#fcfcfc;border:#f0f4ff 2upx solid",
							coupontype: "color:#FFFFFF;background-color: #a2a4a5;",
							lingqubtn: ""
						}
						//讲所有样式变为灰色
						this.rightico = "../../static/reddenvelope/yilingwan.png"
						this.setlefticon_gray()
						this.setstyle_gray()
						this.$message.showToast(res.msg)
					}
					return
				} else {
					//领取成功
					this.value.state = 1
					// console.log(this.value)
					// this.OpenRule()
					this.$message.showToast(res.msg)

				}
			},
			notice(msg) {
				
				uni.showModal({
					title: "未登录提示",
					content: msg,
					confirmText: "登陆",
					success(res) {
						if (res.confirm == true) {
							uni.navigateTo({
								url: "../../pages/mine/login"
							})
						}

					}
				})
			}

		}


	}
</script>

<style lang="scss">
	$primary-color: #333;

	.couponitem {
		height: 200upx;
		margin: 10upx  0upx 0upx  0upx;
		align-items: center;
		// width: 100%;
	}

	.rule {
		height: 150upx;
		// margin: 0upx 30upx 0upx 30upx;

		border: #dee6fb 2upx solid;
		border-top: #dee6fb 0upx solid;
		/* border-radius: 20upx; */
		border-bottom-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
		align-items: center;
		font-size: 20upx;
		color: #333333;
	}

	.couponleft {
		/* border:20px solid #aec3f9; */
		border: #dee6fb 2upx solid;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		height: 100%;
		width: 30%;
		color: #267ce7;
		background-color: #f0f4ff;
	}

	.couponright {
		/* border:20px solid #aec3f9; */
		border: #dee6fb 2upx solid;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		height: 100%;
		width: 70%;
		color: #333333;
		background-color: #fbfcff;
	}

	.coupontype {
		width: 25%;
		height: 30upx;
		background-color: #287cdf;
		border-radius: 10upx;
		color: #FFFFFF;
		font-size: 16upx;
	}

	.lingqubtn {
		margin-left: 10upx;
		margin-right: 30upx;
		border: #277ee8 2upx solid;
		color: #277ee8;
		border-radius: 10upx;
	}

	.rulebtn {
		color: #333333;
		font-size: 23upx;
		align-items: center;
		align-items: center;
	}

	.gengduotaocan {
		width: 40upx;
		height: 40upx;
		margin-right: 40upx;
	}
</style>
